<template>
    <div class="temp">
        <el-table :data="tableData" stripe style="width: 100%" contenteditable="true">
            <el-table-column  prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="address" label="语文"></el-table-column>
            <el-table-column prop="address" label="数学"></el-table-column>
            <el-table-column prop="address" label="英语"></el-table-column>
            <el-table-column prop="address" label="物理"></el-table-column>
        </el-table>
        <div class="btn">
            <el-button @click="save()" type="primary" plain>提交</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Temp',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        watch: {
            tableData:{
                handler:function(nowVal,oldVal){
                    console.log("nowVal--->"+nowVal+";"+"oldVal---->"+oldVal)
                    const arr = [];
                    nowVal.forEach((item, index) => {
                        Object.keys(item).some(key => oldVal[index][key] !== item[key]) && arr.push(item)
                    })
                    console.log(arr, 2)
                }
            },
            deep:true
        },
        methods: {
            save(){
//                this.$set(this.tableData, '0.date' ,1)
//                console.log(this.tableData)
            }
        }


    }
</script>
<style>
    .btn{
        margin-top: 20px;
        text-align: center;
    }
</style>
